<template>
  <div class="register">
    <a-form :model="formRef" v-bind="formLayout">
      <a-form-item label="用户名" has-feedback v-bind="validateInfos.username">
        <a-input v-model:value="formRef.username" />
      </a-form-item>
      <a-form-item label="密码" has-feedback v-bind="validateInfos.password">
        <a-input type="password" v-model:value="formRef.password" />
      </a-form-item>
      <a-form-item
        label="重复密码"
        has-feedback
        v-bind="validateInfos.confirmPassword"
      >
        <a-input type="password" v-model:value="formRef.confirmPassword" />
      </a-form-item>
      <a-form-item label="手机号" has-feedback v-bind="validateInfos.phone">
        <a-input type="Input" v-model:value="formRef.phone" />
      </a-form-item>
      <a-form-item label="电子邮箱" has-feedback v-bind="validateInfos.email">
        <a-input type="input" v-model:value="formRef.email" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 16, offset: 2 }">
        <a-button
          type="primary"
          @click.prevent="onSubmit"
          :loading="showLoading"
          >注册</a-button
        >
        <a-button style="margin-left: 10px" @click="resetFields">重置</a-button>
        <a-button style="margin-left: 20px" @click="$router.push('login')"
          >去登录</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRaw, ref } from "vue";
import { RuleObject } from "ant-design-vue/lib/form/interface";
import { Form, message } from "ant-design-vue";
import { admin, user } from "@/api";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

// import { useRoute } from "vue-router";

const showLoading = ref(false);
const formLayout = reactive({
  labelCol: { span: 6 },
  wrapperCol: { span: 12 },
});
const formRef = reactive({
  username: "",
  password: "",
  confirmPassword: "",
  phone: "",
  email: "",
});
const ruleRef = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
    },
    {
      max: 16,
      message: "用户名最长为16个字符",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
    {
      max: 16,
      message: "密码最长为16个字符",
    },
  ],
  confirmPassword: [
    {
      required: true,
      validator(rule: RuleObject, value: string) {
        if (value !== formRef.password) {
          return Promise.reject("两次密码结果不一致");
        } else if (!value) {
          return Promise.reject("请再输入一次密码");
        } else {
          return Promise.resolve();
        }
      },
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
    },
    {
      pattern:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      message: "手机号不合法",
    },
  ],
  email: [
    {
      required: true,
      message: "请输入电子邮箱",
    },
    {
      type: "email",
      message: "电子邮箱不合法",
    },
  ],
});
const { useForm } = Form;
const { resetFields, validate, validateInfos } = useForm(formRef, ruleRef);
const store = useStore();
const $router = useRouter();
const onSubmit = async () => {
  await validate();
  showLoading.value = true;
  await user.update(formRef);
  store.commit("setUser", {
    username: formRef.username,
    isAdmin: false,
  });
  window.user = {
    username: formRef.username,
    isAdmin: false,
  };
  showLoading.value = false;
  await $router.push({ name: "app" });
  message.success("注册成功，正在跳转..");
};
</script>
<!--<script lang="ts">-->
<!--import { defineComponent, reactive, toRaw } from "vue";-->
<!--import { Form } from "ant-design-vue";-->
<!--import { RuleObject } from "ant-design-vue/lib/form/interface";-->
<!--export default defineComponent({-->
<!--  name: "register",-->
<!--  setup() {},-->
<!--});-->
<!--</script>-->

<style scoped></style>
